<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .xixi{
                color:red;
                width:100px;
                height: 100px;
                border:1px solid blue;
            }
            .bg{
                background:yellow;
            }
        </style>
        <script>
            function f1(){
                var div=document.querySelector("#mydiv");
                // 方式一：DOM对象.className 设置类样式
                //获取class的属性值，DOM对象.className  DOM对象.getAttribute("class")
                // console.log(div.getAttribute("class"));
                // console.log(div.className);

                // DOM对象.className="值1  值2";
                div.className="xixi bg";
            }

            function f2(){
                var div2=document.querySelector("#mydiv2");
                //方式二：DOM对象.style.样式名  通过行内样式
                // console.log(mydiv2.style.color);

                //遇到复合样式，去掉-，变成驼峰式写法
                // console.log(mydiv2.style.fontSize);

                // DOM对象.style.样式名="值";
                mydiv2.style.background="lightgreen";
                mydiv2.style.fontWeight="bold";
            }
        </script>
    </head>
    <body>
        <input type="button" value="js访问css样式" onclick="f1()">
        <input type="button" value="js访问css样式" onclick="f2()">
        <div id="mydiv" class="haha">我是div</div>
        <div id="mydiv2" class="haha" style="color:green;font-size:30px;">我是div</div>
    </body>
</html>